<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>管理接口</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/mdui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/mdclub.css"/>
</head>
<div th:include="common/adheader::header"></div>
<div class="mdui-container mdui-p-x-2" id="control">
    <div class="mdui-table-fluid" v-if="apis">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>#</th>
                <th style="width:120px;">名称</th>
                <th>英文名</th>
                <th>添加时间</th>
                <th style="width:120px;">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="mdui-table-row" v-for="api in apis">
                <td>{{ api.id }}</td>
                <td style="width:120px;">{{ api.name }}</td>
                <td>{{ api.doc }}</td>
                <td>{{ createtime(api.createtime)}}</td>
                <td style="width:120px;">
                    <a class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '修改'}" :href="'/admin/editapi?doc='+api.doc"><i class="mdui-icon material-icons mdui-text-color-theme-icon">edit</i></a>
                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '删除'}" @click="deleteApi(api.id)"><i class="mdui-icon material-icons mdui-text-color-theme-icon">delete</i></button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="mc-empty" v-else style="background-image: url('assets/css/994575169312f0027615406d265202f2.png');">
        <div class="title">
            尚未任何接口
        </div>
        <div class="description">
            添加接口后，这里就可以进行管理了
        </div>
    </div>
</div>

<!-- 搜索接口Dialog -->
<div id="search" class="mc-user-edit mdui-dialog">
    <div class="mdui-dialog-title mdui-color-theme-a200 mdui-p-y-2">
        <button class="mdui-btn mdui-btn-icon" mdui-dialog-close><i class="mdui-icon material-icons">close</i></button> 搜索接口
    </div>
    <div class="mdui-dialog-content mdui-p-x-3" style="margin-bottom:100px;">
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">搜索</label>
            <input class="mdui-textfield-input" type="text" v-model="searchContent" @focus="focus" required/>
            <div class="mdui-textfield-error">搜索内容不能为空</div>
        </div>
        <div v-if="searchResult">
            <ul class="mdui-list">
                <a class="mdui-list-item mdui-ripple" v-for="api in apis" :href="'?action=admin&page=edit&id='+api.id">
                    <div class="mdui-list-item-content">
                        <div class="mdui-list-item-title">ID:{{ api.id }} {{ api.name }}</div>
                    </div>
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-theme-a200">equalizer</i> {{ api.access }}
                </a>
            </ul>
        </div>
        <div class="mdui-text-center mdui-m-t-5" v-else>
            没有搜到相关接口
        </div>
    </div>
</div>

<div th:include="common/adfooter::footer"></div>
<script src="/js/sweetalert.min.js"></script>
<script>
    let control = new Vue({
        el: '#control',
        data: {
            apis: [],
        },

        methods: {
            createtime:function (time) {
                var datatime=new Date(time*1000);
                return datatime.toLocaleString();
            },
            deleteApi: function(id) {
                swal({
                    title: "确定删除该接口?",
                    text: "请注意数据删除后将不可恢复！",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: '/api/delapi',
                                method: 'POST',
                                contentType : "application/json",
                                data: JSON.stringify({
                                    id:id
                                }),
                                beforeSend: function() {
                                    swal("删除中......", " ", {
                                        icon: "info",
                                        buttons: false
                                    });
                                },
                                success: function(data) {
                                    if (data.code === 20000) {
                                        swal(data.data, "2秒后自动刷新页面......", {
                                            icon: "success",
                                            buttons: false
                                        });
                                        setTimeout(function() {
                                            location.reload();
                                        }, 2000);
                                    } else {
                                        swal(data.data, " ", {
                                            icon: "error",
                                            buttons: false
                                        });
                                    }
                                }
                            });
                        } else {

                        }
                    });
            }
        },
        created() {
            fetch('/api/getAllapi')
                .then(response => response.json())
                .then(json => {
                    this.apis = json.data;
                })
        }
    });

    let search = new Vue({
        el: '#search',
        data: {
            apis: [],
            searchContent: '',
            searchResult: true,
            msg: false
        },
        methods: {
            focus: function() {
                this.code = true;
            }
        },
        watch: {
            searchContent: function(val) {
                if (val) {
                    fetch('./Data/api.php?type=searchApi&s=' + val)
                        .then(response => response.json())
                        .then(json => {
                            if (json.code == 0) {
                                this.searchResult = true;
                                this.apis = json.data;
                            } else {
                                this.searchResult = false;
                                this.msg = json.msg;
                            }
                        });
                } else {
                    this.searchResult = true;
                    this.apis = [];
                }
            }
        }
    });
</script>
</body>

</html>